<template>
	<view class="order">
		<view class="nav clearfix">
			<view :class="[activeIndex==1?'active':'']" @click="qiehuan(1)">
				<view class="title">可用</view>
				<view class="dingwei"></view>
			</view>
			<view :class="[activeIndex==2?'active':'']" @click="qiehuan(2)">
				<view class="title">已使用</view>
				<view class="dingwei"></view>
			</view>
			<view :class="[activeIndex==3?'active':'']" @click="qiehuan(3)">
				<view class="title">已过期</view>
				<view class="dingwei"></view>
			</view>
		</view>
		<view class="content" v-if="list.length != 0">
			<view class="list clearfix" v-for="(item,index) in list" :key="index">
				<view class="left fl">
					<image :src="baseUrl + '/wximage/coupons_bukexuan.png'" v-if="activeIndex == 3 || activeIndex == 2"></image>
					<image :src="baseUrl + '/wximage/coupons_kexuan.png'" v-else></image>
					<view class="money" v-if="item.coupons_attr == 1">{{item.coupons_minus}}<text class="danwei">元</text></view>
					<view class="money" v-if="item.coupons_attr == 2">{{item.coupons_minus}}<text class="danwei">小时</text></view>
					<view class="attr" v-if="item.coupons_type == 1">普通宝</view>
					<view class="attr" v-else>快充宝</view>
				</view>
				<view class="center fl">
					<view class="title">{{item.coupons_name}}</view>
					<view class="shuxing" v-if="item.coupons_attr == 1">减免{{item.coupons_minus}}元</view>
					<view class="shuxing" v-if="item.coupons_attr == 2">减免{{item.coupons_minus}}小时</view>
					<view class="date" v-if="item.type == 1">有效期至{{item.expired_at}}</view>
					<view class="date" v-else>使用时间:{{item.use_time}}</view>
				</view>
				<view class="right fr">
					<view v-if="activeIndex == 1 && dqxztype == ''">
						<view class="kexuan">
							<image :src="baseUrl + '/wximage/coupons_wxuanze.png'"></image>
						</view>
					</view>
					<view v-else-if="activeIndex == 2">
						<view class="nokexuan"></view>
					</view>
					<view v-else-if="activeIndex == 1 && dqxztype != ''">
						<view class="kexuan" v-if="dqxztype == item.coupons_type" @click="xuanze(index)">
							<image :src="baseUrl + '/wximage/coupons_wxuanze.png'" v-if="xuanzhong != item.id"></image>
							<image :src="baseUrl + '/wximage/coupons_xuanze.png'" v-else></image>
						</view>
						<view class="nokexuan" v-else></view>
					</view>
					<view class="nokexuan" v-else></view>
				</view>
			</view>
			<view class="queding" @click="queding" v-if="activeIndex == 1 && dqxztype != ''">
				确定
			</view>
		</view>
		<view class="empty" v-else>
			<view v-if="activeIndex == 1" @click="topage('/pages/user/guanzhu')">
				<image :src="baseUrl + '/wximage/coupons_empty.png'"></image>
				<view class="name">暂无优惠券,去领取</view>
			</view>
			<view v-else>
				<image :src="baseUrl + '/wximage/coupons_empty.png'"></image>
				<view class="name">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				baseUrl: getApp().globalData.baseUrl,
				activeIndex: 1,
				list: [],
				page: 1,
				pageSize: 10,
				total: 0,
				dqxztype: '',//当前选择的属性
				xuanzhong: '',
				jianmian: '',
			}
		},
		onLoad(options) {
			if(options){
				this.dqxztype = options.type;
			}
			
			this.getList(this.activeIndex, this.page, this.pageSize);
		},
		onReachBottom() {
			if (this.total != this.list.length) {
				this.page = this.page + 1;
		
				this.getList(this.activeIndex, this.page, this.pageSize);
			}
		},
		methods:{
			getList(activeIndex, page, pageSize) {
				this.request({
					url: '/xcx/userscoupons',
					data: {
						user_id: uni.getStorageSync('user_id'),
						page: page,
						pageSize: pageSize,
						activeIndex: activeIndex,
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						this.total = res.data.data.total;
						this.list = this.list.concat(res.data.data.data);
					} else {
						uni.showToast({
							title: '请求失败，请稍后再试',
							icon: 'none'
						})
					}
				})
			},
			qiehuan(index){
				this.activeIndex = index;
				
				this.total = 0;
				this.page = 1;
				this.list = [];
				
				this.getList(this.activeIndex, this.page, this.pageSize);
			},
			xuanze(index){
				if(this.activeIndex == 1 && this.dqxztype != ''){
					if(this.xuanzhong){
						this.xuanzhong = '';
					}else{
						this.xuanzhong = this.list[index].id;
					}
				}
			},
			queding(){
				let index= this.xuanzhong;
				
				if(index == ''){
					let data = {
						'coupons_id': 0,
						'coupons_user_id': 0,
						'jianmian': '',
					}
					uni.setStorage({
						key: 'coupons',
						data: data
					})
				}else{
					for(let i=0;i<this.list.length;i++){
						if(index == this.list[i].id){
							let index = i;

							if(this.list[index].coupons_attr == 1){
								this.jianmian = '减免' + this.list[index].coupons_minus + '元';
							}else{
								this.jianmian = '减免' + this.list[index].coupons_minus + '小时';
							}
							
							let data = {
								'coupons_id': this.list[index].coupons,
								'coupons_user_id': this.list[index].id,
								'jianmian': this.jianmian,
							}
							uni.setStorage({
								key: 'coupons',
								data: data
							})
						}
					}
				}
				uni.navigateBack()
			},
			topage(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F8F8F8;
	}
	
	.order{
		width: 100%;
		margin: 0 auto;
		
		.nav{
			width: 100%;
			background: #ffffff;
			height: 84rpx;
			line-height: 84rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			
			>view{
				display: inline-block;
				
				.title{
					font-size: 24rpx;
					color: #333333;
					margin-right: 32rpx;
				}
			}
			
			.active{
				position: relative;
				
				.title{
					font-size: 32rpx;
					font-weight: 700;
				}
				
				.dingwei{
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					background: linear-gradient(to bottom, #10DAC5, #59FFF6);
					position: absolute;
					top: 12rpx;
					right: 22rpx;
				}
			}
		}
		
		.content{
			width: 94%;
			margin: 20rpx auto;
			
			.list{
				width: 100%;
				padding: 32rpx 30rpx;
				box-sizing: border-box;
				background: #ffffff;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				
				.left{
					position: relative;
					
					image{
						width: 200rpx;
						height: 134rpx;
					}
					
					.money{
						position: absolute;
						top: 10rpx;
						left: 20rpx;
						font-size: 60rpx;
						color: #FFFFFF;
						font-weight: 700;
						
						.danwei{
							font-size: 36rpx;
							color: #FFFFFF;
						}
					}
					
					.attr{
						font-size: 24rpx;
						color: #FFFFFF;
						position: absolute;
						top: 90rpx;
						left: 20rpx;
					}
				}
				
				.center{
					margin-left: 24rpx;
					
					.title{
						font-size: 28rpx;
						font-weight: 700;
						color: #333333;
						margin-top: 10rpx;
						margin-bottom: 8rpx;
					}
					
					.shuxing{
						font-size: 24rpx;
						color: #999999;
						margin-bottom: 6rpx;
					}
					
					.date{
						font-size: 24rpx;
						color: #999999;
					}
				}
				
				.right{
					
					.nokexuan{
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background: #F6F6F6;
						margin-top: 50rpx;
					}
					
					.kexuan{
						margin-top: 50rpx;
						
						image{
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
						}
					}
				}
			}
			
			.queding{
				width: 60%;
				margin: 0 auto;
				margin-top: 200rpx;
				text-align: center;
				height: 92rpx;
				line-height: 92rpx;
				text-align: center;
				font-size: 36rpx;
				color: #FFFFFF;
				font-weight: 600;
				background: linear-gradient(to bottom, #AFFFF7, #00D6C0);
				border-radius: 46rpx;
			}
		}
		
		.empty{
			width: 100%;
			margin: 0 auto;
			margin-top: 200rpx;
			text-align: center;
			
			image{
				width: 220rpx;
				height: 180rpx;
			}
			
			.name{
				font-size: 24rpx;
				color: #666666;
				margin-top: 10rpx;
			}
		}
	}
</style>